<style lang="stylus" type="text/stylus">
  @import './materialsListing.styl'
</style>
<template>
  <div id="materialsListing">
    <div class="materialsTop">
      <div class="materialsTitle">
        <span>发布政策：政策短名称</span>
        <span>/</span>
        <span>编辑PDF材料清单</span>
      </div>
      <div class="materialsStatus">
        <span>已录入17项材料要求，</span>
        <span>尚未录入通用材料</span>
      </div>
    </div>
    <div class="materialsContent">
      <div class="materialsContentLeft">
        <VuePerfectScrollbar class="materialsContentLeftScroll">
          <div class="unifiedRequirements">
            <p>统一要求</p>
            <span>
              全部采用A4画幅（210mm*297mm）纵向PDF格式，单页拼版，不得跨页拼版。涉及原件扫描的，图像要保证300DPI。单页文件大小不得超过1Mb。按照每一项材料要求拆分上传，不得打包到同一个PDF中。四个边缘至少保留2cm。
            </span>
          </div>
          <div class="general">
            <div class="generalDescription">
              <p class="generalDescriptionTitle">
                通用
              </p>
              <span>只要申请此政策就必须要提交的PDF材料</span>
            </div>
            <div class="materialsInfoContent">
              <div class="materialsInfoContentTitle">
                <p class="materialsInfoContentName">材料名称</p>
                <span class="materialsInfoContentInfo">
                  材料名称材料名称材料名称材料名称
                </span>
              </div>
              <div class="materialsRequire">
                <p class="materialsRequireName">材料具体要求</p>
                <span class="materialsRequireContent">
                  材料具体要求，材料具体要求，材料具体要求，材料具体要求，材料具体要求，材料具体要求，材料具体要求，材料具体要求，材料具体要求，材料具体要求，材料具体要求，材料具体要求，
                </span>
              </div>
            </div>
            <div class="materialsInfoContent">
              <div class="materialsInfoContentTitle">
                <p class="materialsInfoContentName">材料名称</p>
                <span class="materialsInfoContentInfo">
                  材料名称材料名称材料名称材料名称
                </span>
              </div>
              <div class="materialsRequire">
                <p class="materialsRequireName">材料具体要求</p>
                <span class="materialsRequireContent">
                  材料具体要求，材料具体要求，材料具体要求，材料具体要求，材料具体要求，材料具体要求，材料具体要求，材料具体要求，材料具体要求，材料具体要求，材料具体要求，材料具体要求，
                </span>
              </div>
            </div>
            <div class="materialsInfoContent">
              <div class="materialsInfoContentTitle">
                <p class="materialsInfoContentName">材料名称</p>
                <span class="materialsInfoContentInfo">
                  材料名称材料名称材料名称材料名称
                </span>
              </div>
              <div class="materialsRequire">
                <p class="materialsRequireName">材料具体要求</p>
                <span class="materialsRequireContent">
                  材料具体要求，材料具体要求，材料具体要求，材料具体要求，材料具体要求，材料具体要求，材料具体要求，材料具体要求，材料具体要求，材料具体要求，材料具体要求，材料具体要求，
                </span>
              </div>
            </div>
            <div class="addMaterialsBtn">
              <Icon type="ios-plus-empty"></Icon>
            </div>
          </div>
        </VuePerfectScrollbar>
      </div>
      <div class="materialsContentRight">
        <VuePerfectScrollbar class="materialsContentRightScroll">
          <div class="fundingCard">
            <div class="fundingCardDescription">
              <p>资助1:500强企业</p>
              <span>申报次资助所需补充上传的PDF材料</span>
            </div>
            <div class="fundingCardInfoContent">
              <div class="fundingCardInfoContentTitle">
                <p class="fundingCardInfoContentName">材料名称</p>
                <span class="fundingCardInfoContentInfo">
                  材料名称材料名称材料名称材料名称
                </span>
              </div>
              <div class="fundingCardRequire">
                <p class="fundingCardRequireName">材料具体要求</p>
                <span class="fundingCardRequireContent">
                  材料具体要求，材料具体要求，材料具体要求，材料具体要求，材料具体要求，材料具体要求，材料具体要求，材料具体要求，材料具体要求，材料具体要求，材料具体要求，材料具体要求，
                </span>
              </div>
            </div>
            <div class="addFundingCardBtn">
              <Icon type="ios-plus-empty"></Icon>
            </div>
          </div>
          <div class="fundingCard">
            <div class="fundingCardDescription">
              <p>资助1:500强企业</p>
              <span>申报次资助所需补充上传的PDF材料</span>
            </div>
            <div class="fundingCardInfoContent">
              <div class="fundingCardInfoContentTitle">
                <p class="fundingCardInfoContentName">材料名称</p>
                <span class="fundingCardInfoContentInfo">
                  材料名称材料名称材料名称材料名称
                </span>
              </div>
              <div class="fundingCardRequire">
                <p class="fundingCardRequireName">材料具体要求</p>
                <span class="fundingCardRequireContent">
                  材料具体要求，材料具体要求，材料具体要求，材料具体要求，材料具体要求，材料具体要求，材料具体要求，材料具体要求，材料具体要求，材料具体要求，材料具体要求，材料具体要求，
                </span>
              </div>
            </div>
            <div class="fundingCardInfoContent">
              <div class="fundingCardInfoContentTitle">
                <p class="fundingCardInfoContentName">材料名称</p>
                <span class="fundingCardInfoContentInfo">
                  材料名称材料名称材料名称材料名称
                </span>
              </div>
              <div class="fundingCardRequire">
                <p class="fundingCardRequireName">材料具体要求</p>
                <span class="fundingCardRequireContent">
                  材料具体要求，材料具体要求，材料具体要求，材料具体要求，材料具体要求，材料具体要求，材料具体要求，材料具体要求，材料具体要求，材料具体要求，材料具体要求，材料具体要求，
                </span>
              </div>
            </div>
            <div class="fundingCardInfoContent">
              <div class="fundingCardInfoContentTitle">
                <p class="fundingCardInfoContentName">材料名称</p>
                <span class="fundingCardInfoContentInfo">
                  材料名称材料名称材料名称材料名称
                </span>
              </div>
              <div class="fundingCardRequire">
                <p class="fundingCardRequireName">材料具体要求</p>
                <span class="fundingCardRequireContent">
                  材料具体要求，材料具体要求，材料具体要求，材料具体要求，材料具体要求，材料具体要求，材料具体要求，材料具体要求，材料具体要求，材料具体要求，材料具体要求，材料具体要求，
                </span>
              </div>
            </div>
            <div class="addFundingCardBtn">
              <Icon type="ios-plus-empty"></Icon>
            </div>
          </div>
          <div class="fundingCard">
            <div class="fundingCardDescription">
              <p>资助1:500强企业</p>
              <span>申报次资助所需补充上传的PDF材料</span>
            </div>
            <div class="fundingCardInfoContent">
              <div class="fundingCardInfoContentTitle">
                <p class="fundingCardInfoContentName">材料名称</p>
                <span class="fundingCardInfoContentInfo">
                  材料名称材料名称材料名称材料名称
                </span>
              </div>
              <div class="fundingCardRequire">
                <p class="fundingCardRequireName">材料具体要求</p>
                <span class="fundingCardRequireContent">
                  材料具体要求，材料具体要求，材料具体要求，材料具体要求，材料具体要求，材料具体要求，材料具体要求，材料具体要求，材料具体要求，材料具体要求，材料具体要求，材料具体要求，
                </span>
              </div>
            </div>
            <div class="addFundingCardBtn">
              <Icon type="ios-plus-empty"></Icon>
            </div>
          </div>
        </VuePerfectScrollbar>
      </div>
    </div>
    <div class="materialsBottom">
      <div class="btnList">
        <div class="saveBtn">保存</div>
        <div class="saveAndCloseBtn">保存并退出</div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    name      : 'materialsListing',
    data() {
      return {}
    },
    props     : [],
    computed  : {},
    methods   : {},
    mounted() {},
    created() {}
  }
</script>


